

<script lang="ts">
import { defineComponent, ref, watch, reactive, computed, nextTick } from "vue";
import { useRouter } from "vue-router";
import { AppModule } from "@/store/modules/app";
import { UserModule } from "@/store/modules/user";
import { Erc20Module } from "@/store/modules/erc20";
import { GetERC20Module } from "@/store/modules/getERC20";
import { useI18n } from "vue-i18n";
import { getAnnouncementList, getDirectList, getUserInfo, getParameter, transfer, invest, send, getInvestList, reinvest, pay } from "@/api";
import { getAssetsFile } from "@/utils/pub-use";
import { USDT_TOKEN, GetERC20_CONTRACT } from "@/contract";
import { showToast, showDialog, showConfirmDialog } from 'vant';
import { formatAddress, fromWei } from "@/utils/format";
import Clipboard from "clipboard";
export default defineComponent({
    setup() {
        const router = useRouter();
        const popupShow = ref(false)
        const { t } = useI18n();
        const amount = ref();
        const gradeList = ref([
            getAssetsFile("grade0.png"),
            getAssetsFile("grade1.png"),
            getAssetsFile("grade2.png"),
            getAssetsFile("grade3.png"),
            getAssetsFile("grade4.png"),
            getAssetsFile("grade5.png"),
            getAssetsFile("grade6.png"),
            getAssetsFile("grade7.png"),
            getAssetsFile("grade8.png"),
            getAssetsFile("grade9.png"),
        ])
        const announcementList = ref([]);
        const userInfo = ref({})
        const investAmount = ref()
        const time = computed(() => {
            return ({ CreatedAt, Status, InvestAmount }) => {
                let day = 86400000;
                const startTimestamp = new Date(CreatedAt).getTime()
                const endTimestamp = startTimestamp + day * (10 + Status)
                var timestamp = new Date().getTime()
                const income = Math.floor((timestamp - startTimestamp) / day) * InvestAmount / 10
                return { timestamp: endTimestamp - timestamp, rate: income >= Number(InvestAmount) ? InvestAmount : income }
            }
        })
        const USDT = ref("")
        const setatTransfer = reactive({
            address: "",
            amount: ""
        })
        const setat = reactive({
            pageNum: 0,
            pageSize: 20,
        });
        const setatInvest = reactive({
            pageNum: 1,
            pageSize: 5,
            status: 1,
            total: 0
        });
        const refreshing = ref(false);
        const loading = ref(false);
        const finished = ref(true);
        const loadingTransfer = ref(false)
        const loadingTransferTo = ref(false)
        const loadinginves = ref(false)
        const loadingSend = ref(false)
        const pageLoading = ref(true)
        const loadingReinvest = ref(false)
        const list = ref([]);
        const investList = ref([])
        const parameter: any = ref({})
        const onRefresh = () => {
            setat.pageNum = 0;
            finished.value = false;
            refreshing.value = true;
            loading.value = true;
            onLoad();
        };
        const onLoad = async () => {
            try {
                const res = await getDirectList(setat);
                if (res.data.code != 20) return;
                if (refreshing.value) {
                    list.value = [];
                    refreshing.value = false;
                }
                list.value = list.value.concat(res.data.data.DirectList || []);
                loading.value = false;
                setat.pageNum++;
                if (list.value.length >= res.data.data.Total) {
                    finished.value = true;
                }
            } catch (error) {
                loading.value = false;
                finished.value = true;
            }
        };
        const loadInvestList = async () => {
            try {
                const res = await getInvestList({
                    pageNum: setatInvest.pageNum - 1,
                    pageSize: setatInvest.pageSize,
                    status: setatInvest.status
                });
                if (res.data.code != 20) return;
                setatInvest.total = res.data.data.Total
                investList.value = res.data.data.InvestList || []
            } catch (error) {
                investList.value = []
            }
        }
        const sendTransfer = async () => {
            if (!Number(amount.value)) return;
            try {
                loadingTransfer.value = true;
                await UserModule.verifyToken();
                if (fromWei(USDT.value) < Number(amount.value)) {
                    showToast(t("layout.theBalanceUSDTIsOnly") + fromWei(USDT.value));
                    loadingTransfer.value = false;
                    return;
                }

                const params = await Erc20Module.transfer({
                    amount: amount.value,
                    spender: parameter.value.ReceiveAddress,
                    owner: USDT_TOKEN,
                });
                await params.wait();
                showDialog({ title: `${t("layout.success")}` })
                loadData()
            } catch (error: any) {
            }
            loadingTransfer.value = false;
        };
        const sendTransferTo = async () => {
            if (!setatTransfer.address || !Number(setatTransfer.amount)) return;
            await UserModule.verifyToken();
            showConfirmDialog({
                title: t("layout.TransferMoney2"),
                beforeClose: async function (action: string): Promise<boolean> {
                    if (action === "confirm") {
                        try {
                            if (userInfo.value.USDT < Number(setatTransfer.amount)) {
                                showToast(t("layout.theBalanceUSDTIsOnly") + userInfo.value.USDT);
                                return;
                            }
                            const res = await transfer(setatTransfer);
                            setatTransfer.address = "";
                            setatTransfer.amount = "";
                            if (res.data.code == 20) {
                                showDialog({ title: `${t("layout.success")}` })
                            } else {
                                showToast(res.data.message)
                            }
                            loadData()
                        } catch (params: any) { }
                        return false;
                    } else {
                        return true;
                    }
                },
            }).catch(() => { });
        }
        const sendInvest = async () => {
            if (userInfo.value.USDT < Number(investAmount.value) / 10) {
                showToast(t("layout.theBalanceUSDTIsOnly") + userInfo.value.USDT);
                return;
            }
            await UserModule.verifyToken();
            showConfirmDialog({
                title: t("layout.ConfirmReservation"),
                beforeClose: async function (action: string): Promise<boolean> {
                    if (action === "confirm") {
                        try {
                            const res = await invest({ amount: investAmount.value / 10 });
                            if (res.data.code == 20) {
                                showDialog({ title: `${t("layout.success")}` })
                            } else {
                                showToast(res.data.message)
                            }
                            loadData()
                        } catch (params: any) { }
                        return false;
                    } else {
                        return true;
                    }
                },
            }).catch(() => { });
        }

        const sendReinvest = async () => {
            try {
                if (userInfo.value.USDT < Number(investAmount.value / 10)) {
                    showToast(t("layout.theBalanceUSDTIsOnly") + userInfo.value.USDT);
                    return;
                }
                loadinginves.value = true;
                await UserModule.verifyToken();
                const res = await reinvest({ amount: investAmount.value / 10, investId: reinvestSet.value.Id });
                if (res.data.code == 20) {
                    popupShow.value = false
                    showDialog({ title: `${t("layout.success")}` })
                } else {
                    showToast(res.data.message)
                }
                loadData()
            } catch (error: any) {
                showToast(error);
            }
            loadinginves.value = false;

        }

        const sendPay = async (item) => {
            if (userInfo.value.USDT < Number(item.InvestAmount * 9)) {
                showToast(t("layout.theBalanceUSDTIsOnly") + userInfo.value.USDT);
                return;
            }
            await UserModule.verifyToken();
            showConfirmDialog({
                title: t("layout.confirmPayment"),
                beforeClose: async function (action: string): Promise<boolean> {
                    if (action === "confirm") {
                        try {
                            const res = await pay({ investId: item.Id });
                            if (res.data.code == 20) {
                                showDialog({ title: `${t("layout.success")}` })
                            } else {
                                showToast(res.data.message)
                            }
                            loadData()
                        } catch (error: any) {
                            showToast(error);
                        }
                        return false;
                    } else {
                        return true;
                    }
                },
            }).catch(() => { });

        }
        const reinvestSet = ref({})
        const sendReinvestSet = (item) => {
            reinvestSet.value = item
            popupShow.value = true
            investAmount.value = item.InvestAmount * 10
        }


        const clickSend = async () => {

            if (!Number(amount.value)) return;
            try {
                if (userInfo.value.USDT < Number(amount.value)) {
                    showToast(t("layout.theBalanceUSDTIsOnly") + userInfo.value.USDT);
                    return;
                }
                loadingSend.value = true;
                const GetERC20USDT = await Erc20Module.balanceOf({
                    owner: USDT_TOKEN,
                    spender: GetERC20_CONTRACT
                })
                if (fromWei(GetERC20USDT) < Number(amount.value)) {
                    loadingSend.value = false
                    return showToast(t("layout.InsufficientNalanceInTheWithdrawalPool"))
                }
                await UserModule.verifyToken();
                const res = await send({ amount: amount.value });
                await GetERC20Module.getERC20(res.data.data.Send);
                if (res.data.code == 20) {
                    showDialog({ title: `${t("layout.success")}` })
                } else {
                    showToast(res.data.message)
                }
                loadData();
            } catch (error) {
                console.log(error);
            }
            loadingSend.value = false;
        };

        const shareAddress = computed(() => {
            return UserModule.userAddr
        });
        const copy = () => {
            const clipboard = new Clipboard(".copy");
            nextTick(() => {
                clipboard.on("success", () => {
                    showToast(t("layout.copySuccessfully"));
                    clipboard.destroy();
                });
                clipboard.on("error", () => {
                    showToast(t("layout.fail"));
                    clipboard.destroy();
                });
            });
        };
        const _setInterval = () => {
            setInterval(async () => {
                const res = await getUserInfo()
                userInfo.value = res.data.data.UserInfo || {}
            }, 5000)
        }
        const loadData = async () => {
            pageLoading.value = true
            const res = await getUserInfo()
            userInfo.value = res.data.data.UserInfo || {}
            getParameter().then(res => {
                parameter.value = res.data.data.Parameter
                investAmount.value = investAmount.value || parameter.value.Amount1
            })
            await Erc20Module.balanceOf({
                owner: USDT_TOKEN,
            }).then(res => {
                USDT.value = res
            })
            loadInvestList()
            pageLoading.value = false

        }
        const loadAnnouncement = (id) => {
            var languageId = 0;
            switch (id) {
                case "en":
                    languageId = 0;
                    break;

                case "zh":
                    languageId = 1;
                    break;
            }
            getAnnouncementList({ pageNum: 0, pageSize: 10, languageId }).then(
                (res) => {
                    announcementList.value = res.data.data.AnnouncementList;
                }
            );
        };
        watch(
            () => UserModule.userAddr,
            (newUserAddr: string) => {
                if (newUserAddr) {
                    loadData();
                    loadAnnouncement(AppModule.language);
                    onRefresh()
                    _setInterval()
                }
            },
            { immediate: true }
        );
        watch(
            () => AppModule.language,
            (newLanguage: string) => {
                if (newLanguage && UserModule.userAddr) {
                    loadAnnouncement(newLanguage);
                }
            },
            { immediate: true }
        );
        return {

            gradeList,
            amount,
            announcementList,
            investAmount,
            time,
            setatTransfer,
            userInfo,
            getAssetsFile,
            shareAddress,
            formatAddress,
            copy,
            list,
            setat,
            refreshing,
            loading,
            finished,
            onRefresh,
            onLoad,
            sendTransfer,
            loadingTransfer,
            pageLoading,
            fromWei,
            USDT,
            sendTransferTo,
            loadingTransferTo,
            parameter,
            loadinginves,
            sendInvest,
            loadingSend,
            clickSend,
            investList,
            loadInvestList,
            setatInvest,
            sendReinvest,
            sendPay,
            popupShow,
            sendReinvestSet,
            reinvestSet
        };
    },
});
</script>
<template>
    <div class="page">
        <div class="balance">
            <div class="label">USDT</div>
            <div class="value">{{ userInfo.USDT || 0 }}</div>
            <div class="logs" @click="$refs.record.onRefresh()"></div>
        </div>
        <div class="recharge">
            <van-field v-model="amount" type="digit" :placeholder="$t('layout.PleaseEnterAValue')" />
            <div class="row">
                <van-button type="success" :loading="loadingSend" @click="clickSend"
                    :disabled="pageLoading || userInfo.status == 1">{{
                        $t('layout.WithdrawCoins') }}</van-button>
                <van-button type="primary" :loading="loadingTransfer" @click="sendTransfer" :disabled="pageLoading">{{
                    $t('layout.topUp') }}</van-button>
            </div>
        </div>
        <van-notice-bar :scrollable="false" color="#fff" mode="link">
            <van-swipe vertical class="notice-swipe" :autoplay="3000" :touchable="false" :show-indicators="false">
                <van-swipe-item v-for="(item, i) in announcementList" :key="i" @click="$refs.announcementRefs.show(item)">{{
                    item.Title }}</van-swipe-item>
            </van-swipe>
            <template #left-icon>
                <div class="left-icon">
                    <img :src="getAssetsFile('image3.png')" alt="" srcset="">
                    {{ $t('layout.announcement') }}
                </div>
            </template>
            <template #right-icon>
                <div class="left-icon" @click="$refs.announcementListRefs.onRefresh()">
                    <van-icon name="wap-nav" />
                </div>
            </template>
        </van-notice-bar>
        <div class="reserve">
            <ul>
                <li v-for="(item, index) in 5" :class="{ active: parameter['Amount' + (index + 1)] == investAmount }"
                    @click="investAmount = parameter['Amount' + (index + 1)]" :key="index">
                    {{ parameter['Amount' + (index + 1)] }}
                </li>
            </ul>
            <van-button type="primary" :loading="loadinginves" @click="sendInvest"
                :disabled="pageLoading || investAmount >= 10000">{{
                    $t('layout.reserve') }}</van-button>
        </div>
        <div class="placAnOrder">
            <div class="title">{{ $t('layout.MyOrder') }}</div>
            <van-tabs v-model:active="setatInvest.status" @change="loadInvestList">
                <van-tab :title="$t('layout.PendingPaymentReAppointment')" :name="1">
                    <div class="block toBePaid" v-for="(item, index) in investList" :key="index">
                        <div class="row">
                            <div class="cell">
                                <div class="label">{{ $t('layout.reserve') }}</div>
                                <div class="value">{{ item.InvestAmount }}</div>
                            </div>
                            <div class="cell">
                                <div class="label">{{ $t('layout.income') }}</div>
                                <div class="value">{{ time(item).rate < 0 ? 0 : time(item).rate }}</div>
                                </div>
                            </div>
                            <div class="countDown">
                                <van-count-down :time="time(item).timestamp" format="DD 天 HH 时 mm 分 ss 秒">
                                    <template #default="timeData">
                                        <span class="blockTime">{{ timeData.days }}</span>
                                        <span class="colon">{{ $t('layout.sky') }}</span>
                                        <span class="blockTime">{{ timeData.hours }}</span>
                                        <span class="colon">{{ $t('layout.hour') }}</span>
                                        <span class="blockTime">{{ timeData.minutes }}</span>
                                        <span class="colon">{{ $t('layout.point') }}</span>
                                        <span class="blockTime">{{ timeData.seconds }}</span>
                                        <span class="colon">{{ $t('layout.Second') }}</span>
                                    </template>
                                </van-count-down>
                                <div class="button">
                                    <van-button type="primary" @click="sendPay(item)" :loading="item.loadingPay"
                                        :disabled="!!item.Status">
                                        {{ !!item.Status ? $t('layout.Paid') : $t('layout.pay') }}
                                        {{ item.InvestAmount * 9 }}</van-button>
                                    <van-button type="primary" @click="sendReinvestSet(item)" :loading="item.loading"
                                        :disabled="time(item).timestamp > 0 || !item.Status">{{
                                            $t('layout.MakeAnAppointmentAgain') }}</van-button>
                                </div>
                            </div>
                            <div class="time"><van-icon name="underway-o" />{{ item.CreatedAt }}</div>
                        </div>
                </van-tab>
                <van-tab :title="$t('layout.completed')" :name="2">
                    <div class="block completed" v-for="(item, index) in investList" :key="index">
                        <div class="row">
                            <div class="cell">
                                <div class="label">{{ $t('layout.reserve') }}</div>
                                <div class="value">{{ item.InvestAmount }}</div>
                            </div>
                            <div class="cell">
                                <div class="label">{{ $t('layout.Paid') }}</div>
                                <div class="value">{{ item.InvestAmount * 9 }}</div>
                            </div>
                            <div class="cell">
                                <div class="label">{{ $t('layout.MakeAnAppointmentAgain') }}</div>
                                <div class="value">{{ item.ReinvestAmount }}</div>
                            </div>
                        </div>
                        <div class="time"><van-icon name="underway-o" />{{ item.CreatedAt }}</div>
                    </div>
                </van-tab>
                <van-tab :title="$t('layout.unpaid')" :name="3">
                    <div class="block unpaid" v-for="(item, index) in investList" :key="index">
                        <div class="row">
                            <div class="cell">
                                <div class="label">{{ $t('layout.reserve') }}</div>
                                <div class="value">{{ item.InvestAmount }}</div>
                            </div>
                            <div class="cell">
                                <img src="@/assets/image/image4.png" />
                            </div>
                        </div>
                        <div class="time"><van-icon name="underway-o" />{{ item.CreatedAt }}</div>
                    </div>
                </van-tab>
                <van-pagination v-model="setatInvest.pageNum" :total-items="setatInvest.total" :show-page-size="3"
                    :items-per-page="setatInvest.pageSize" force-ellipses @change="loadInvestList" />
            </van-tabs>

        </div>
        <div class="transfer">
            <van-field v-model="setatTransfer.address" :placeholder="$t('layout.PleaseEnterTheOtherPartySWalletAddress')" />
            <van-field v-model="setatTransfer.amount" :placeholder="$t('layout.PleaseEnterTheTransferQuantity')">
                <template #right-icon>
                    <span>{{ $t('layout.balance') }}:{{ userInfo.USDT }} USDT</span>
                </template>
            </van-field>
            <van-button type="primary" @click="sendTransferTo" :loading="loadingTransferTo"
                :disabled="pageLoading || userInfo.status == 1">{{
                    $t('layout.TransferMoney') }}</van-button>
        </div>
        <div class="team">
            <div class="title">{{ $t('layout.myTeam') }}</div>
            <div class="myLink" v-if="userInfo.InvitationCode">
                <div class="address van-ellipsis">
                    <span>{{ $t('layout.MyPromotionLink') }}</span>：{{ userInfo.InvitationCode }}
                </div>
                <img src="@/assets/image/copy.png" class="copy" @click="copy"
                    :data-clipboard-text="userInfo.InvitationCode" />
            </div>
            <div class="grade-block">
                <div class="info">{{ $t('layout.myLevel') }} <img :src="gradeList[userInfo.UserLevel || 0]" /></div>
            </div>
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list v-model:loading="loading" :finished="finished" :finished-text="$t('layout.noMore')"
                    @load="onLoad">
                    <ul>
                        <li>
                            <span>{{ $t('layout.DirectPushAddress') }}</span>
                            <span>{{ $t('layout.PersonalDeposit') }}</span>
                            <span>{{ $t('layout.TeamPerformance') }}</span>
                        </li>
                        <li v-for="(  item, index  ) in   list  " :key="index">
                            <span>{{ formatAddress(item.Address) }}</span>
                            <span>{{ item.TotalInvest }}</span>
                            <span>{{ item.DownlineInvest }}</span>
                        </li>
                    </ul>
                </van-list>
            </van-pull-refresh>
        </div>
        <van-popup v-model:show="popupShow" round closeable close-icon="close">
            <div class="reserve" :style="{ marginTop: '30px' }">
                <ul>
                    <li v-for="(  item, index  ) in   5  "
                        :class="{ active: parameter['Amount' + (index + 1)] == investAmount }"
                        @click="investAmount = parameter['Amount' + (index + 1)]" :key="index">
                        {{ parameter['Amount' + (index + 1)] }}
                    </li>
                </ul>
                <van-button type="primary" :loading="loadinginves" @click="sendReinvest"
                    :disabled="investAmount < reinvestSet.InvestAmount * 10">{{ $t('layout.MakeAnAppointmentAgain')
                    }}</van-button>
            </div>
        </van-popup>
    </div>
    <announcement ref="announcementRefs" />
    <announcement-list ref="announcementListRefs" />
    <usdt-record-list ref="record" />
</template>
<style lang="less" scoped>
.page {
    padding: 0 15px;
    background: url("@/assets/image/image2.png") no-repeat;
    background-position: top;
    background-size: contain;

    .balance {
        padding-top: 69px;
        position: relative;

        .label {
            font-size: 15px;
            font-weight: 400;
            color: #FFFFFF;
        }

        .value {
            margin-top: 7px;
            font-size: 40px;
            font-weight: bold;
            color: #FFFFFF;
            line-height: 40px;
        }

        .logs {
            position: absolute;
            right: 15px;
            bottom: 30px;
            width: 31px;
            height: 31px;
            background: url("@/assets/image/image8.png") no-repeat;
            background-position: top;
            background-size: contain;
        }
    }

    .recharge {
        margin-top: 30px;
        padding: 20px 15px;
        background: #FFFFFF;
        box-shadow: 0px 0 10px 0px rgba(78, 144, 255, 0.15);
        border-radius: 8px;

        .van-field {
            height: 45px;
            padding: 0;
            background: #F6F6F7;
            border-radius: 8px;

            &:deep(input) {
                height: 45px;
                text-indent: 10px;
            }
        }

        .row {
            margin-top: 12px;
            display: flex;
            justify-content: space-between;

            .van-button {
                width: 153px;
            }
        }
    }

    .van-notice-bar {
        margin-top: 12px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 0 10px 0px rgba(78, 144, 255, 0.15);
        border-radius: 8px;

        .right-icon {
            img {
                width: 16px;
                height: auto;
            }
        }

        .notice-swipe {
            height: 40px;
        }

        .van-swipe-item {
            line-height: 40px;
            color: rgba(0, 0, 0, 1);
        }

        .left-icon {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #38BFE4;
            line-height: 14px;
            font-weight: bold;
            margin-right: 8px;

            img {
                width: 20px;
                height: 18px;
            }
        }
    }

    .reserve {
        position: relative;
        margin-top: 12px;
        padding: 20px 15px;
        background: #FFFFFF;
        box-shadow: 0px 0 10px 0px rgba(78, 144, 255, 0.15);
        border-radius: 8px;



        ul {
            display: flex;
            justify-content: space-between;

            li {
                width: 56px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                font-weight: 500;
                background: rgba(255, 255, 255, 0.2);
                border-radius: 8px;
                border: 1px solid rgba(56, 191, 228, 0.2);

                &.active {
                    color: #FFFFFF;
                    background: rgba(56, 191, 228, 1);
                    border: 1px solid rgba(56, 191, 228, 1);
                }
            }
        }

        .van-button {
            margin-top: 20px;
        }
    }

    .van-popup {
        .reserve {
            box-shadow: 0px 0 0px 0px rgba(78, 144, 255, 0.15);

            ul {

                li {
                    margin: 0 3px;
                }
            }


        }
    }

    .placAnOrder {
        margin-top: 12px;
        padding: 20px 15px 12px 15px;
        background: #FFFFFF;
        box-shadow: 0px 0 10px 0px rgba(78, 144, 255, 0.15);
        border-radius: 8px;

        .title {
            font-size: 20px;
        }

        .van-tabs {
            margin-top: 20px;

            &:deep(.van-tabs__wrap) {

                .van-tabs__nav {
                    background: transparent;
                    backdrop-filter: blur(10px);
                    justify-content: space-between;

                    .van-tab {
                        flex: none;
                        height: 30px;
                        font-size: 12px;
                        padding: 0 20px;
                        border: 1px solid rgba(56, 191, 228, 0.2);
                        border-radius: 8px;

                        &.van-tab--active {
                            color: #FFFFFF;
                            font-weight: 500;
                            background: rgba(56, 191, 228, 1);
                            border: 1px solid rgba(56, 191, 228, 1);
                        }


                    }

                    .van-tabs__line {
                        display: none;
                    }
                }
            }

            .block {
                margin-bottom: 8px;
                padding: 20px 15px;
                background: linear-gradient(134deg, rgba(56, 191, 228, 0.16) 0%, rgba(30, 109, 241, 0) 100%);
                border-radius: 8px;

                &.toBePaid {

                    .row {
                        display: flex;
                        justify-content: space-around;

                        .cell {
                            text-align: center;

                            .label {}

                            .value {
                                margin-top: 10px;
                                font-size: 20px;
                                font-weight: bold;
                                color: #38BFE4;
                                line-height: 20px;
                            }
                        }
                    }

                    .countDown {
                        margin-top: 14px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .button {
                            display: flex;
                            position: relative;

                            .van-button {
                                height: 30px;
                                margin: 0;
                                padding: 0;
                                min-width: 81px;
                                font-size: 12px;
                                font-weight: 500;
                                background: url("@/assets/image/image6.png");
                                background-position: center;
                                background-size: contain;
                                background-repeat: no-repeat;

                                &:last-child {
                                    position: relative;
                                    margin-left: -13px;
                                    min-width: 90px;
                                    height: 31px;
                                    color: #38BFE4;
                                    background: url("@/assets/image/image7.png");
                                    background-position: center;
                                    background-size: contain;
                                    background-repeat: no-repeat;
                                }

                            }
                        }

                        .van-count-down {
                            font-size: 10px;
                            color: #1F2120;

                            .blockTime {
                                margin: 0 1px;
                                display: inline-block;
                                width: 18px;
                                height: 18px;
                                text-align: center;
                                line-height: 18px;
                                font-weight: bold;
                                font-size: 12px;
                                color: #1F2120;
                                background: rgba(56, 191, 228, 0.1);
                                border-radius: 1px;
                            }
                        }
                    }


                }

                .time {
                    margin-top: 11px;
                    display: flex;
                    align-items: center;
                    font-size: 12px;
                    font-weight: 400;
                    color: #1F2120;

                    .van-icon {
                        margin-right: 6px;
                    }
                }

                &.completed,
                &.unpaid {
                    .row {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .cell {
                            flex: 1;
                            text-align: center;

                            .label {
                                font-size: 12px;
                                font-weight: 400;
                                color: #1F2120;
                            }

                            .value {
                                margin-top: 9px;
                                font-size: 20px;
                                font-weight: bold;
                                color: #38BFE4;
                                line-height: 20px;
                            }

                            img {
                                width: 46px;
                                height: 40px;
                            }
                        }
                    }
                }
            }
        }
    }

    .transfer {
        margin-top: 12px;
        padding: 12px 15px 20px 15px;
        background: #FFFFFF;
        box-shadow: 0px 0 10px 0px rgba(78, 144, 255, 0.15);
        border-radius: 8px;

        .van-field {
            margin-top: 8px;
            height: 45px;
            padding: 0;
            background: #F6F6F7;
            border-radius: 8px;

            &:deep(input) {
                height: 45px;
                text-indent: 10px;
            }

            span {
                padding-right: 10px;
            }
        }

        .van-button {
            margin-top: 12px;
        }
    }

    .team {
        margin-top: 12px;
        padding: 20px 15px;
        background: #FFFFFF;
        box-shadow: 0px 0 10px 0px rgba(78, 144, 255, 0.15);
        border-radius: 8px;

        .title {
            font-size: 20px;
        }

        .myLink {
            margin-top: 12px;
            height: 45px;
            padding: 0 15px;
            background: #F6F6F7;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            img {
                width: 15px;
                height: 15px;
            }
        }

        .grade-block {
            margin-top: 12px;
            height: 77px;
            background: url("@/assets/image/image5.png") no-repeat;
            background-position: top;
            background-size: contain;
            display: flex;
            align-items: center;

            .info {
                padding-left: 30px;
                display: flex;
                align-items: center;
                font-size: 12px;
                font-weight: 400;
                color: #FFFFFF;

                img {
                    margin-left: 26px;
                    width: 26px;
                    height: 23px;
                }
            }
        }

        ul {
            padding: 15px 0;

            li {
                display: flex;
                justify-content: space-between;
                text-align: center;
                line-height: 24px;

                span {
                    flex: 1;
                    font-size: 12px;
                    font-weight: 400;
                    color: #1F2120;
                }

                &:first-child {
                    span {
                        color: #888888;
                    }
                }
            }
        }
    }
}
</style>
